import React, {useState, useEffect,PropsWithChildren} from 'react'
import {connect} from 'react-redux' 
import {StaticContext,RouteComponentProps} from 'react-router' 
import {Card, Button} from 'antd' 
import NavHeader from '@/components/NavHeader'
import {getLesson} from '@/api/home'
import Lesson ,{LessonResult} from '../../../typings/lessons'
import actions from '@/store/actions/cart'
import {CombinedState} from '@/store/reducers'
import './index.less'

const {Meta} = Card

interface Params {
    id: string
}

type RouteProps = RouteComponentProps<Params, StaticContext,Lesson>
type StateProps = ReturnType<typeof mapStateToProps>
type DispatchProps = typeof actions 
type Props = PropsWithChildren<RouteProps & StateProps & DispatchProps>


function Detail(props:Props) {
    let [lesson, setLesson] = useState<Lesson>({} as Lesson)
    useEffect(()=> {
        (async ()=> {
            let lesson:Lesson = props.location.state 
            // 如果是从课程列表页跳转过来  有state ,如果是属刷新的没有state
            if(!lesson) { // 如果没有lesson传递过来 掉接口取课程详情 
                const id = props.match.params.id 
                const result: LessonResult = await getLesson<LessonResult>(id)
                if(result.success) lesson = result.data
            }
            setLesson(lesson)
        })()
    },[])

    const addCartItem =(lesson:Lesson) => {
        let video:HTMLVideoElement = document.querySelector('#lesson-video')
        let cart:HTMLSpanElement = document.querySelector(".anticon.anticon-shopping-cart")
        let cloneVideo:HTMLVideoElement = video.cloneNode(true) as HTMLVideoElement
        let videoWidth = video.offsetWidth 
        let videoHeight = video.offsetHeight 
        let cartHeight = cart.offsetWidth
        let cartWidth = cart.offsetWidth 
        let videoTop = video.getBoundingClientRect().top
        let videoLeft = video.getBoundingClientRect().left
        let cartRight = cart.getBoundingClientRect().right 
        let cartBottom = cart.getBoundingClientRect().bottom

        

        cloneVideo.style.cssText = `
            z-index: 1000;
            opacity:0.8;
            position:fixed;
            width:${videoWidth}px;
            height:${videoHeight}px;
            top:${videoTop}px;
            left:${videoLeft}px;
            transition: all 2s ease-in-out;
           `        

        document.body.appendChild(cloneVideo)
        setTimeout(() => {
            cloneVideo.style.left = cartRight - cartWidth /2 +'px'
            cloneVideo.style.top = cartBottom - cartHeight /2 + 'px'
            cloneVideo.style.width = '0px'
            cloneVideo.style.height = '0px'
            cloneVideo.style.opacity = '50'
        }, 0);

        props.addCartItem(lesson)
    } 


    return (
        <>
            <NavHeader history={props.history}>课程详情</NavHeader>
            <Card 
                hoverable
                style={{width:'100%'}}
                cover={<img id="lesson-video" src={lesson.poster}/>}
            >
                <Meta 
                    title={lesson.title} 
                    description={
                        <>
                            <p>价格:{lesson.price}</p>
                            <p>
                                <Button 
                                    className="add-cart"
                                    onClick={()=> addCartItem(lesson)}
                                >加入购物车
                                </Button>
                            </p>
                        </>
                    }
                />
            </Card>
        </>
    )
}

let mapStateToProps = (state:CombinedState):CombinedState=> state 
export default connect(mapStateToProps, actions)(Detail)